<template>
	<navbar title="订单详情" :isBack="true"></navbar>
	<view class="" style="width: 100%;height: 100vh;background-color: #F9F9F9;padding: 30rpx;">
		<view class=""
			style="width: 100%;background-color: white;border-radius: 10rpx;padding: 24rpx;margin-bottom: 20rpx;">
			<view class="" style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
				<view class="" style="font-weight: bold;">
					产品信息
				</view>
				<view class="" v-if="Info.state == 2"
					style="padding: 5rpx 10rpx;color: #34B120;border-radius: 8rpx;background: rgba(87,200,69,0.3);font-size: 20rpx;">
					已付款
				</view>
				<view class="" v-if="Info.state == 3"
					style="padding: 5rpx 10rpx;color: #F56C6C;border-radius: 8rpx;background: rgba(245,108,108,0.3);font-size: 20rpx;">
					已退款
				</view>
			</view>
			<view class="" style="margin-top: 26rpx;display: flex;">
				<view class="">
					<image :src="Info.goods.goods_cover" style="width: 256rpx;height: 160rpx;border-radius: 20rpx;"
						mode="aspectFill"></image>
				</view>
				<view class=""
					style="display: flex;flex-direction: column;margin-left: 30rpx;justify-content: space-between;height: 160rpx;width: 100%;">
					<view class="">
						{{Info.goods.goods_name}}
					</view>
					<view class="" style="color: #535353;font-size: 24rpx;">
						x{{Info.goods.num}}
					</view>

					<view class="" style="width: 100%;justify-content: flex-end;display: flex;">
						<span style="font-size: 24rpx;font-weight: bold;">实付：￥</span><span
							style="font-weight: bold;">{{Info.goods.total_price}}</span>
					</view>

				</view>
			</view>
		</view>
		<view class="" style="margin-top: 20rpx;background-color: white;padding: 30rpx 25rpx;border-radius: 10rpx;">
			<view class="" style="font-weight: bold;">
				订单信息
			</view>
			<view class="" style="margin-top: 20rpx;" v-if="Info.dk_mobile">
				手机号码：{{Info.dk_mobile}}
			</view>
			<view class=""
				style="margin-top: 20rpx;width: 100%;display: flex;justify-content: space-between;align-items: center;">
				<view class="">
					订单编号：{{Info.order_no}}
				</view>
				<view class="" @tap="copy(1)">
					<image src="../../static/order/copy.png" style="width: 28rpx;height: 28rpx;" mode="aspectFill">
					</image>
				</view>
			</view>

			<view class="" style="margin-top: 20rpx;">
				下单时间：{{Info.create_time}}
			</view>
			<view class="" style="margin-top: 20rpx;" v-if="Info.pay_time">
				支付方式：微信支付
			</view>
			<view class="" style="margin-top: 20rpx;" v-if="Info.pay_time">
				付款时间：{{Info.pay_time}}
			</view>
		</view>
		<view class=""
			style="margin-top: 20rpx;background-color: white;padding: 30rpx 25rpx;display: flex;justify-content: space-between;width: 100%;align-items: center;border-radius: 10rpx;"  v-if="Info.code">
			<view class="" style="display: flex;align-items: center;">
				<view class="" style="font-weight: bold;">
					测评码
				</view>
				<view class="" style="margin-left: 60rpx;">
					{{Info.code}}
				</view>
			</view>
			<view class="" @tap="copy(2)">
				<image src="../../static/order/copy.png" style="width: 28rpx;height: 28rpx;" mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		onLoad,
		onShareAppMessage,
		onShareTimeline,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref
	} from 'vue'
	import tools from '@/utils/tools'
	import { orderDetail } from '@/service/api/index'
	const id = ref('')
	const Info = ref({}) as any
	onLoad((opt) => {
		id.value = opt.id
		getData()
	})
	const getData = async () => {
		const res = await orderDetail({ id: id.value });
		Info.value = res.msg;
	}
	const copy = (v) => {
		//1是订单编号
		let content = ''
		if (v == 1) {
			content = '订单编号'
		} else if (v == 2) {
			content = '测评码'
		}
		uni.setClipboardData({
			data: content, success() {
				tools.showToast('复制成功')
			}, fail() {
				tools.showToast('复制失败')
			}
		})
	}
</script>

<style scoped lang="scss">
</style>